<template>
  <div>
    <MyTableVue :arr="data">
      <template #header>
        <!-- 因为这是无法确定等因素用具名插槽 -->
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{ scope.row.id }}</td>
        <td>{{ scope.row.goods_name }}</td>
        <td>{{ scope.row.goods_price }}</td>
        <td>
          <div>
            <!-- 第二种写法 -->
            <input
              type="text"
              v-if="scope.row.inputVisible"
              @blur="scope.row.inputVisible = false"
              @keyup.enter="enterFn(scope.row)"
              @keyup.esc="escFn(scope.row)"
              v-model="scope.row.inputValue"
              :ref="scope.row.id"
            />
            <!-- 第一种写法 -->
            <!-- <input
              type="text"
              v-if="scope.row.inputVisible"
              v-suibian
              @blur="scope.row.inputVisible = false"
              @keyup.enter="enterFn(scope.row)"
              @keyup.esc="escFn(scope.row)"
              v-model="scope.row.inputValue"
           
            /> -->
            <!-- <button
              v-else
              class="badge bg-primary"
              @click="scope.row.inputVisible = true"
            > -->
            <!-- 第二种写法 -->
            <button v-else class="badge bg-primary" @click="tagFn(scope.row)">
              Tag
            </button>
          </div>
          <span
            class="badge bg-warning text-dark"
            v-for="(item, index) in scope.row.tags"
            :key="index"
            style="margin-right: 10px"
            >{{ item }}</span
          >
        </td>
        <td>
          <button @click="del(scope.index)">删除</button>
        </td>
      </template>
    </MyTableVue>
  </div>
</template>
<script>
import MyTableVue from "../components/MyTable.vue"
import axios from "axios"
axios.defaults.baseURL = "https://www.escook.cn"
export default {
  components: {
    MyTableVue
  },
  data () {
    return {
      data: []
    }
  },
  created () {
    axios({
      url: "/api/goods",
    }).then(res => {
      console.log(res)
      this.data = res.data.data
    })
  },
  methods: {
    // 删除
    del (thenIndex) {
      this.data.splice(thenIndex, 1)
    },
    // 监测input回车，无数据拦截
    enterFn (obj) {
      if (obj.inputValue.trim().length === 0) {
        return alert('数据不可以为空')
      } else {
        obj.tags.push(obj.inputValue)
        obj.inputValue = ''
      }
    },
    // 监测input取消，清空数据
    escFn (obj) {
      obj.inputValue = ''
    },
    tagFn (thenId) {
      // 数据辩护--真实Dom更新是异步的，所以下面这句话执行时，input还没有挂载到页面上，所以获取不到
      console.log(thenId)
      thenId.inputVisible = true
      this.$nextTick(() => {
        // 只有具体的key名才能点
        // 使用表达式久德永[]括起来，只作为key去找
        this.$refs[thenId.id].focus()
      })

    }

  }
}
</script>